Bulma: Как определить порядок стека на мобильных устройствах

Question

Я беру Bulma flexbox css framework для вращения - пока это довольно аккуратно! Единственным камнем преткновения, который я нашел, является то, что я не могу настроить порядок отображения для мобильных устройств.

<div class="columns"> 
    <div class="column foo">Foo</div> 
    <div class="column bar">Bar</div> // Would like this to be first on small deviecs 
</div> 

EDIT

Вот что мой CSS выглядит следующим образом:

body, html { 
    background-color: blue; 
} 

.foo { order: 2; } 
.bar { order: 1; } 


@media only screen and (min-width: 769px) { 
    body, html { 
     background-color: red; 
    } 

    .foo { order: 1; } 
    .bar { order: 2; } 
} 

Answer 1

Для этого ответа, я предполагаю, что вы хотите, чтобы отобразить BAR первый ТОЛЬКО на экранах мобильных устройств. И для больших экранов вы хотите, чтобы FOO отображался с левой стороны.

Один из способов сделать это - использовать flexbox, из которого строится булма. На больших экранах bulma дает столбцам свойство display:flex, которое может использоваться для отображения содержимого в строках и столбцах.

Однако на небольших экранах свойство дисплея переключается на block. В большинстве случаев, когда последовательные элементы имеют display:block, они собираются в порядке.

Мы можем использовать это с помощью фанкового обходного пути. Место BAR сначала в вашем html. Затем добавить класс columns и стиль его следующим образом: HTML:

<div class="columns reverse-row-order"> 
    <div class="column bar">Bar</div> 
    <div class="column foo">Foo</div> 
</div> 

CSS:

.reverse-row-order{ 
flex-direction:row-reverse; 
} 

А вот jsFiddle, если вы хотите, чтобы он работал: https://jsfiddle.net/99ydhod8/