다른보기의 열 개수 변경

Question

모바일보기의 열 두 개와 바탕 화면보기의 세 개의 열.

예

* { 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexbox>div { 
 
    width: 33.333%; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .flexbox>div { 
 
    width: 50%; 
 
    } 
 
}

<div class="flexbox"> 
 
    <div>DIV 1</div> 
 
    <div>DIV 2</div> 
 
    <div>DIV 3</div> 
 
    <div>DIV 4</div> 
 
    <div>DIV 5</div> 
 
    <div>DIV 6</div> 
 
</div>

궁금 해서요, 당신은 부르마 함께 할 것입니다 방법에 대해 설명합니다.

모바일보기에서 시도

<div class="columns is-mobile is-multiline"> 
    <div class="column is-4-desktop is-6-mobile">DIV 1</div> 
    <div class="column is-4-desktop is-6-mobile">DIV 2</div> 
    <div class="column is-4-desktop is-6-mobile">DIV 3</div> 
    <div class="column is-4-desktop is-6-mobile">DIV 4</div> 
    <div class="column is-4-desktop is-6-mobile">DIV 5</div> 
    <div class="column is-4-desktop is-6-mobile">DIV 6</div> 
</div> 

이 아니라 바탕 화면보기, 올바른 것입니다.

무엇이 누락 되었습니까? 당신은 데스크탑과 모바일 사이에서 크기 때문에 바탕 화면 크기에 맞게뿐만 아니라 태블릿 크기를 정의해야합니다

JSFiddle

Answer 1

은 부르마위한 태블릿이다.

<div class="columns is-mobile is-multiline"> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 1</div> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 2</div> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 3</div> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 4</div> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 5</div> 
     <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 6</div> 
    </div>