合計12カラムで計算します。
.acms-containerで囲うと幅940px中央揃えに変わります。
ブロックをレイアウトするために使います。
<div class="acms-container"> <div class="acms-grid"> <div class="acms-col-5"> ... </div> <div class="acms-col-7"> ... </div> </div> </div>
<div class="acms-container"> <div class="acms-grid-r"> <div class="acms-col-5"> ... </div> <div class="acms-col-7"> ... </div> </div> </div>
<div class="acms-container"> <div class="acms-grid-r"> <div class="acms-col-2 acms-col-md-5 acms-col-sm-5"> ... </div> <div class="acms-col-3 acms-col-md-3 acms-col-sm-4"> ... </div> <div class="acms-col-7 acms-col-md-4 acms-col-sm-3"> ... </div> </div> </div>
<div class="acms-grid"> <div class="acms-col-4"> ... </div> <div class="acms-col-8"> <div class="acms-grid"> <div class="acms-col-5"> ... </div> <div class="acms-col-7"> ... </div> </div> </div> </div>
.acms-push-5にするとグリッドが右側にきて、.acms-pull-7にするとグリッドが左側にきます。
<div class="acms-grid"> <div class="acms-col-7 acms-push-5"> ... </div> <div class="acms-col-5 acms-pull-7"> ... </div> </div>
タブレット幅のときに.acms-push-md-5にするとグリッドが右側にきて、.acms-pull-md-7にするとグリッドが左側にきます。
<div class="acms-grid-r"> <div class="acms-col-7 acms-col-md-7 acms-push-md-5"> ... </div> <div class="acms-col-5 acms-col-md-5 acms-pull-md-7"> ... </div> </div>
スマートフォンの幅のときに.acms-push-sm-5にするとグリッドが右側にきて、.acms-pull-sm-7にするとグリッドが左側にきます。
<div class="acms-grid-r"> <div class="acms-col-7 acms-col-sm-7 acms-push-sm-5"> ... </div> <div class="acms-col-5 acms-col-sm-5 acms-pull-sm-7"> ... </div> </div>
タブレット幅のときにpush、pullを解除する
<div class="acms-grid-r"> <div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-auto"> ... </div> <div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-auto"> ... </div> </div>
スマートフォン幅のときにpush、pullを解除する
<div class="acms-grid-r"> <div class="acms-col-7 acms-push-5 acms-col-md-7 acms-push-md-5 acms-col-sm-7 acms-push-sm-auto"> ... </div> <div class="acms-col-5 acms-pull-7 acms-col-md-5 acms-pull-md-7 acms-col-sm-5 acms-pull-sm-auto"> ... </div> </div>