layout-grid

echo-grid

flexboxによる、柔軟なグリッドのグループを包括する。
グリッドの仕様上、 overflow: hidden プロパティを付与した、この要素で包括することが望ましい。
echo-grid-row だけでは、グリッド余白が大きくなったときに水平スクロールバーが出てしまう)

echo-grid-row

グリッドのアウトラインを作成する。 ul ,ol にも使用できる。
グリッド余白の大きさは (breakpoint) が lg 以上で、より大きくなる。

命名規則をbootstrapと同様にしたい場合は、 /_scss/_config_advance.scss の変数 $row を変更すること。

echo-grid-col

.echo-grid-row に含まれる前提で、グリッドのセルを作成する。
このクラス単独では、均等幅かつ、 (breakpoint)が sm 以下でグリッドが解除される。

一般的な均等幅のグリッド

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
echo-grid-col
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

<hr class="echo-margin-y-lg">

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

<hr class="echo-margin-y-lg">

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

sub class echo-grid-row-(size)

.echo-grid-row に付与すると、グリッド余白が変更される。

(size) は 0, sm, lg に対応している。
デフォルトの余白は以下の通り。

(size) / (breakpoint)md 以下lg 以上
000
sm.5rem1rem
(default)1rem1.5rem
lg1.5rem3rem

命名規則をbootstrapと同様にしたい場合は、 /_scss/_\config_advance.scss の変数 $row を変更すること。

.echo-grid-row-0

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
echo-grid-col
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

.echo-grid-row-sm

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
echo-grid-col
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

.echo-grid-row-lg

echo-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
echo-grid-col
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">.echo-grid-row-0</p>

<div class="echo-grid">
    <div class="echo-grid-row echo-grid-row-0">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">.echo-grid-row-sm</p>

<div class="echo-grid">
    <div class="echo-grid-row echo-grid-row-sm">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">.echo-grid-row-lg</p>

<div class="echo-grid">
    <div class="echo-grid-row echo-grid-row-lg">
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

sub class echo-grid-col-(breakpoint)-(column)

グリッドのセルの幅を、(breakpoint) 以上のときに (column) / 12の割合に変更する。
(breakpoint) が xxs であれば、常にその幅となる。
.echo-grid-col を付与しなくても挙動には問題ない。

補足:使用頻度が低いクラスの除外

以下のクラスは、使用頻度が非常に低いため、このフレームワークでは除外されている。
/_scss/_config_advance.scss の変数 $optimizefalse に変更すると、すべてのクラスに対応する。

  • .echo-grid-col-(breakpoint)-1
  • .echo-grid-col-(breakpoint)-11

note: Exclusion of less frequently used classes

The following classes are excluded in this framework because they are used very infrequently.
Variable in /_scss/_config_advance.scss Changing $optimize to false corresponds to all classes.

  • .echo-grid-col-(breakpoint)-1
  • .echo-grid-col-(breakpoint)-11

画面サイズでカラムが変動する例

画面幅が 48rem = 768px, 90rem = 1440px のときにカラムが変更される。

echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
echo-grid-col echo-grid-col-md-12 echo-grid-col-xxl-4
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

モバイル端末でもカラムを維持する例

.echo-grid-xxs-(column) を付与すると、画面サイズに関わらずカラムを維持する。

echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">画面サイズでカラムが変動する例</p>

<p>画面幅が <code>48rem = 768px, 90rem = 1440px</code> のときにカラムが変更される。</p>

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col echo-grid-col-md-6 echo-grid-col-xxl-4<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-md-12 echo-grid-col-xxl-4">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col echo-grid-col-md-12 echo-grid-col-xxl-4<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">モバイル端末でもカラムを維持する例</p>

<p><code>.echo-grid-xxs-(column)</code> を付与すると、画面サイズに関わらずカラムを維持する。</p>

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-xxs-6 echo-grid-col-sm-4 echo-grid-col-lg-3 echo-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->

sub class echo-grid-col-order-(breakpoint)-(first or last or number)

グリッドのセルを、指定した順番にする。
(breakpoint)の指定がない場合は、常にその順番となる。
(breakpoint)の指定がある場合は、(breakpoint)以上のときに、指定した順番となる。

first, lastの例

echo-grid-col-order-last
HTMLでは最初です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
HTMLでは二番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-order-lg-first
HTMLでは最後です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

numberの例

一番目と二番目は常に入れ替わっている。画面幅が 62.5rem = 1000px のときに三番目と四番目が入れ替わる。

echo-grid-col-order-2
HTMLでは最初です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-order-1
HTMLでは二番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-order-3 echo-grid-col-order-lg-4
HTMLでは三番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
echo-grid-col-order-4 echo-grid-col-order-lg-3
HTMLでは四番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">first, lastの例</p>

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col echo-grid-col-order-last">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-order-last<br>HTMLでは最初です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">HTMLでは二番目です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-order-lg-first">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-order-lg-first<br>HTMLでは最後です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->


<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-xl echo-margin-bottom-sm">numberの例</p>

<p>一番目と二番目は常に入れ替わっている。画面幅が <code>62.5rem = 1000px</code> のときに三番目と四番目が入れ替わる。</p>

<div class="echo-grid">
    <div class="echo-grid-row">
        <div class="echo-grid-col echo-grid-col-order-2">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-order-2<br>HTMLでは最初です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-order-1">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;"> echo-grid-col-order-1<br>HTMLでは二番目です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-order-3 echo-grid-col-order-lg-4">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-order-3 echo-grid-col-order-lg-4<br>HTMLでは三番目です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
        <div class="echo-grid-col echo-grid-col-order-4 echo-grid-col-order-lg-3">
            <div class="echo-bg-info echo-bg-fade echo-padding-sm" style="height: 100%;">echo-grid-col-order-4 echo-grid-col-order-lg-3<br>HTMLでは四番目です<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
        </div><!-- /.echo-grid-col -->
    </div><!-- /.echo-grid-row -->
</div><!-- /.echo-grid -->