mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

Add .row-reverse to reverse direction

Browse Source
This commit is contained in:
nicholaswmin
2018-11-25 17:27:50 +02:00
parent e8aefdd8ec
commit 09f9cb2f5e
4 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/_includes/grid.html
View File

@ -165,4 +165,33 @@
{% endhighlight %}
<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <a href="#utilities">utility</a> class.</p>
<hr>
<h5>Reverse Direction</h5>
<p>Add <code>.row-reverse</code> to the <code>.row</code> to reverse the column direction. </p>
<div class="row row-reverse">
<div class="col-6">
<div class="card is-center">.col-6</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
</div>
{% highlight html %}
<div class="row row-reverse">
<div class="col-6">
<div class="card is-center">.col-6</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
</div>
{% endhighlight %}
</section>