異なるサイズのチャンクのデータを表示するLaravelブレードのデータサイズ

Question

データを3つにグループ化して表示します。ブラウザウィンドウのサイズがxより小さい場合は、ペアで表示します。どうしたらいいですか？

@foreach ($data['news']->chunk(3) as $chunk) 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pad_bottom_2"> 

    @foreach($chunk as $key => $new) 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 pad_right_1"> 
      <article> 
       // CODE 
      </article> 
     </div> 
    @endforeach 

</div> 
@endforeach 

Answer 1

最も良い方法は、CSSで処理することです。

.col-xs-12 {Your normal styles} 
... 

@media only screen and (max-width: 700px) { /* in case x = 700 */ 
    .col-x-12 {another style to match what you want for small screen} 
    ... 
} 

もう1つの方法は、javascript/jqueryで行うことです。とにかく、これはクライアントサイドコードの義務であり、Laravelとは関係ありません。

This introを読んでください。また、レスポンシブルウェブデザインを読むことができます。