Cara Mengatur Urutan Pada Kolom (Order) Di Foundation

Mengatur Urutan Kolom (Order)

Kolom dapat diatur kembali urutanya pada layar tertentu saja menggunakan prefiks push dan pull. Gunakan class .large-push-x, .medium-push-x, dan .small-push-x untuk menggeser kolom ke kanan. Gunakan large-pull-x, .medium-pull-x dan .small-pull-x untuk menggeser kolom ke kiri. Huruf x mewakili angka 0 sampai 11. Untuk me-reset urutan pada layar besar gunakan class .large-reset-order.

Skrip ordered_column.html

<div class="row">

    <div class="columns small-4 smal1-push-4">

        <div class="panel"> small-push-4 pertama</div>

    </div>

    <div class="columns small-4 small-pull-4">

        <div class="panel"> small-pull-4 kedua</div>

    </div>

    <div class="columns small-4">

        <div class="panel"> small-pull-4 ketiga</div>

    </div>

</div>

<div class="row">

    <div class="columns small-4 medium-push-8 large-reset-order">

        <div class="panel"> medium-push-4 pertama</div>

    </div>

    <div class="columns small-4 medium-pull-4 large-reset-order">

        <div class="panel"> medium-pull-4 kedua</div>

    </div>

    <div class="columns small-4 medium-pull-4 large-reset-order">

        <div class="panel"> medium-pull-4 ketiga</div>

     </div>

 </div>

Baris kedua urutan tidak berubah walaupun pada layar sedang urutanya telah diubah, karena telah di reset menggunakan class .large-reset-order. Sedangkan baris pertama dan kedua urutannya berubah sesuai dengan aturan.

Share :