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
以下でグリッドが解除される。
一般的な均等幅のグリッド
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
<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 以上 |
---|---|---|
0 | 0 | 0 |
sm | .5rem | 1rem |
(default) | 1rem | 1.5rem |
lg | 1.5rem | 3rem |
命名規則をbootstrapと同様にしたい場合は、 /_scss/_\config_advance.scss
の変数 $row
を変更すること。
.echo-grid-row-0
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
.echo-grid-row-sm
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
.echo-grid-row-lg
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
<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
の変数 $optimize
を false
に変更すると、すべてのクラスに対応する。
- .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-xxs-(column)
を付与すると、画面サイズに関わらずカラムを維持する。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<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の例
HTMLでは最初です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
HTMLでは最後です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
numberの例
一番目と二番目は常に入れ替わっている。画面幅が 62.5rem = 1000px
のときに三番目と四番目が入れ替わる。
HTMLでは最初です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
HTMLでは二番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
HTMLでは三番目です
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
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 -->