Bulma : 휴대 기기에서 스택 순서를 정의하려면 어떻게해야합니까?

Bulma flexbox css framework을 스핀으로 사용하고 있습니다. 내가 찾은 유일한 장애물은 모바일 장치의 표시 순서를 설정할 수없는 것입니다. 이 답변Bulma : 휴대 기기에서 스택 순서를 정의하려면 어떻게해야합니까?

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; } 
}

출처

2016-10-20 Damon

당신에게 '

이

<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입니다 그 요소에'order : -1'을 주려고 했습니까? –

마이클 감사합니다! 그냥 시도해 봤습니다. 행운은 없습니다. 그것은 내가 알아 내지 못했던 가장 작은 크기/중단 점인 것처럼 보입니다. 다른 모든 크기로 주문을 이동할 수 있습니다. 내가 명확하게하기 위해 내 질문을 업데이 트했습니다. – Damon

문제를 재현 할 수 없습니다. 도움이 될 수있는 실시간 데모 (예 : jsfiddle.net 또는 codepen.io)를 게시 할 수있는 경우 –

, 당신이 BAR은 이동 화면에 처음 표시 할 있으리라 믿고있어 :

<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>

편집 여기

내 CSS는 모습입니다. 그리고 큰 디스플레이 화면의 경우 가장 왼쪽에 FOO을 표시해야합니다.

이렇게하는 방법 중 하나는 bulma가 구축 된 flexbox을 이용하는 것입니다. 큰 화면에서 bulma는 행과 열에 내용을 표시하는 데 사용할 수있는 display:flex 속성을 열에 제공합니다.

그러나 작은 화면에서는 표시 속성이 block으로 바뀝니다. 대부분의 경우 연속적인 항목이 display:block 일 때 순서대로 스택됩니다.

펑키 한 해결 방법을 사용하여이를 활용할 수 있습니다. 귀하의 html에 처음으로 BAR을 입력하십시오. 다음과 같이 그것을 columns에 클래스를 추가하고 스타일 : HTML : https://jsfiddle.net/99ydhod8/

출처

2017-01-09 03:05:26 Angela

Bulma : 휴대 기기에서 스택 순서를 정의하려면 어떻게해야합니까?

답변

관련 문제