JSFiddle - React, Tailwind, and code Playground
by iliyas b
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container" id="mycontainer">
<section>
<div class="row">
<div>
<div>
<div class="text-center">
<div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens
</div>
<div class="row">
<div class="well col-lg-6 col-sm-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which6can have different number of words</p></a>
</div>
<div class="well col-lg-6 col-sm-12"> <a href=""> <h2>My pretty title 2</h2><p>My subtitle which can have different number of words aaaaaaaaaaaaaaa</p></a>
</div>
</div>
<div class="row">
<div class="well col-lg-6 col-sm-12"> <a href=""> <h2>My pretty title 3</h2><p>My subtitle</p></a>
</div>
<div class="well col-lg-6 col-sm-12"> <a href=""><h2>My pretty title 4</h2><p>My subtitle aaaa</p></a>
</div>
</div>
<div class="row">
<div class="well col-lg-6 col-sm-12"> <a href=""> <h2>My pretty title 5</h2><p>My subtitle which can have different number of words dddddddddddddddd</p></a>
</div>
<div class="well col-lg-6 col-sm-12"> <a href=""><h2>My pretty title 6</h2><p>My subtitle which can have different number of words eeeeeeeeeeeeeeeeee</p></a>
</div>
</div>
</div>
...