Foundation XY Grid - изменение иерархии ячеек на средних и малых без изменения высоты сетки по оси x.

В настоящее время я пытаюсь использовать упорядочение источников, чтобы переместить изображение слева от двух элементов на маленьком экране с одним элементом полной ширины внизу.

Затем я хочу переместить изображение справа от всех трех элементов на средних экранах и выше.

Моя проблема в том, что на средних экранах изображение увеличивает высоту строки grid-x.

Вы можете увидеть проблему здесь:

https://codepen.io/jfitzsimmons/pen/rNBZLVV

Мне сложно понять логику этой работы. Я стараюсь избегать использования видимости, потому что не хочу дублировать код. Кто-нибудь может помочь? Вот моя разметка:

<div class="grid-x grid-padding-x">
  <div class="small-8 cell small-order-2 medium-order-1">
    <p class="uppercase green-text bold-text">
      Title 1
    </p>
    <p class="bold-text">
      Sub heading 1
    </p>
    <p class="bold-text">
      Sub heading 2
    </p>
  </div>
  <div class="small-4 cell text-center small-order-1 medium-order-2">
    <img src="https://via.placeholder.com/300" />
  </div>
  <div class="small-12 cell small-order-3 medium-8">
    <p>
      I want this to be higher up when the screensize is at medium or larger.  I don't want to have all of this space above.
      </p>
      <p>
      Phasellus nec eleifend ex. In porta, sapien quis ullamcorper tincidunt, nibh lectus dignissim diam, at venenatis neque orci nec metus. Vivamus faucibus lectus mattis augue aliquam, nec tempor libero aliquet. Fusce sit amet
      rutrum justo.
    </p>
  </div>
</div>

Мои мозги немного поджарены, но, возможно, есть способ установить исходный порядок в самих элементах grid-x и grid-y.

0 ответов

Другие вопросы по тегам