Make "Scientists & Researchers" row responsive

Now, displays the pic on the right-hand side on larger screens,
but in the same order as the rest (pic on top) on small ones
This commit is contained in:
Badri Sunderarajan 2020-04-10 16:17:37 +05:30
parent 38d4619e07
commit c08e9246cf

View file

@ -31,7 +31,10 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="flex flex-wrap mx-auto"> <div class="flex flex-wrap sm:flex-row md:flex-row-reverse mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/researcher.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10"> <div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="researchers"> <a name="researchers">
<h1 class="text-2xl">Scientists &amp; researchers <i class="icon-flask"></i></h1> <h1 class="text-2xl">Scientists &amp; researchers <i class="icon-flask"></i></h1>
@ -43,9 +46,6 @@
<li>Grip readers with fiction techniques</li> <li>Grip readers with fiction techniques</li>
</ul> </ul>
</div> </div>
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/researcher.png" />
</div>
</div> </div>
<div class="flex flex-wrap mx-auto"> <div class="flex flex-wrap mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3"> <div class="sm:w-full md:w-1/2 lg:w-1/3">