"Text and Image Alternating Left and Right Side"
Semantic UI 2.2.10 Snippet by nicole-wilcox

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="spacer"></div> <div class="ui middle aligned stackable grid container"> <div class="row"> <div class="eight wide column"> <h3 class="ui huge header">Do you have a sweet tooth?</h3> <p>Cupcake ipsum dolor sit amet dessert lollipop cupcake. Bear claw topping jelly-o cookie pie. Liquorice lemon drops gingerbread chupa chups carrot cake. Tiramisu pie bonbon candy canes. Candy canes gingerbread dragée chupa chups chocolate bar. Gummies jelly-o chocolate tootsie roll fruitcake biscuit dessert ice cream candy.</p> <h3 class="ui huge header">Let them eat cake!</h3> <p>Powder chupa chups tiramisu bonbon sweet roll gummies chupa chups. Tootsie roll soufflé cupcake. Toffee chupa chups cake chupa chups toffee. Candy marzipan chocolate. Soufflé ice cream macaroon marshmallow croissant gummi bears sesame snaps.</p> </div> <div class="six wide right floated column"> <img src="http://moziru.com/images/sweets-clipart-mini-cupcake-11.jpg" class="ui medium centered fluid image" /> </div> </div> <div class="row"> <div class="six wide column"> <img src="https://animagehub.com/wp-content/uploads/2016/09/cupcake-vector-5.jpg" class="ui medium centered fluid image" /> </div> <div class="eight wide right floated column"> <h3 class="ui huge header">Baking and shaking</h3> <p>Pie caramels muffin ice cream cake oat cake oat cake biscuit. Chupa chups donut bonbon gingerbread marshmallow. Tiramisu chocolate bar macaroon sweet macaroon tiramisu candy canes danish jelly.</p> <h3 class="ui huge header">Movers and Bakers</h3> <p>Dessert chocolate bar toffee wafer tiramisu dessert muffin wafer. Gummi bears danish bear claw sugar plum muffin fruitcake. Dragée bonbon donut jelly-o tiramisu lollipop ice cream cupcake. Dessert gummi bears chocolate cake jelly-o halvah brownie topping gummi bears lemon drops. </p> </div> </div> </div> <div class="spacer"></div>
.spacer { height: 100px; }

Related: See More


Questions / Comments: