※このサンプルを意図通りに表示するためには、Edge、IE11以降、Firefox28以降、Chrome29以降(※21以降)、Safari9以降(※6.1以降)、Opera17以降(※12.1以降)のバージョンが必要です。(ベンダープレフィックスを使えば「※」に示すバージョン以降でも表示可能です。) 詳しくは解説記事をご参照下さい。
このサンプルには、①～⑩の10個のボックスがあります。ボックスごとにニュースを掲載しているイメージです。最新ニュースから順に並んでいますが、重要度の高いニュースは④と⑦の2つである想定です。
広い画面(横幅641px以上)の場合はリキッドレイアウトで横並びに(HTMLの記述順に)表示します。
しかし、狭い画面(640px以下)の場合は、縦並びに掲載し、重要度の高い2ボックスだけを先頭に表示します。
12月01日
ニュース①（最新）
11月21日
ニュース②
10月31日
ニュース③
10月05日
ニュース④（重要度:高A)
09月25日
ニュース⑤
08月07日
ニュース⑥
08月01日
ニュース⑦（重要度:高B)
07月17日
ニュース⑧
06月11日
ニュース⑨
05月30日
ニュース⑩