Quantcast
Channel: Active questions tagged row - Stack Overflow
Viewing all articles
Browse latest Browse all 446

Three columns and two rows

$
0
0

I do not know very well how to explain writing what I want, so I have left two photos: The first as I have it now (all in a row) and how I want it to be (edited in Photoshop).

In summary I have those 5 in a row but I would like to be able to put them as in the second picture; that the first occupy 2 columns, out of four, whole of two rows and then the other 4 are distributed 2 and 2 per row.

I don't think I have explained well, I'm sorry, I hope that with the edited image is better understood.

<section class="section" id="trainers"><div class="container"><br><br><div class="row"><div class="col"><div class="trainer-item-champion"><div class="image-thumb-roster"><img src="assets/images/wrestlers/brayWyatt.jpg" alt=""></div><div class="down-content"><span>RISE World Champion</span><h4>Bray Wyatt</h4></div></div></div><div class="col"><div class="trainer-item-champion"><div class="image-thumb-roster"><img src="assets/images/wrestlers/juliaHart.jpg" alt=""></div><div class="down-content"><span>RISE Women's Champion</span><h4>Julia Hart</h4></div></div></div><div class="col"><div class="trainer-item-champion"><div class="image-thumb-roster"><img src="assets/images/wrestlers/jayBriscoe.jpg" alt=""></div><div class="down-content"><span>RISE International Champion</span><h4>Jay Briscoe</h4></div></div></div><div class="col"><div class="trainer-item-champion"><div class="image-thumb-roster"><img src="assets/images/wrestlers/streetProfits.jpg" alt=""></div><div class="down-content"><span>RISE Tag Team ChampionS</span><h4>The Street Profits</h4></div></div></div><div class="col"><div class="trainer-item-champion"><div class="image-thumb-roster"><img src="assets/images/wrestlers/streetProfits.jpg" alt=""></div><div class="down-content"><span>RISE Tag Team ChampionS</span><h4>The Street Profits</h4></div></div></div>  </div></div></section><!-- ***** Roster ***** --><div class="row"><div class="col-lg-6 offset-lg-3"><div class="section-heading-roster"><h2 style="color: white;">EL <em>ROSTER</em></h2><img src="assets/images/line-dec.png" alt=""></div></div></div><section class="section" id="trainers"><div class="container"><div class="row"><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/adamPage.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Adam Page</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/annaJay.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Anna Jay</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/billieStarkz.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Billie Starkz</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/eddieKingston.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Eddie Kingston</h4></div></div></div></div></div></section><section class="section" id="trainers"><div class="container"><div class="row"><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/giulia.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Giulia</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/jamieHayter.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Jaime Hayter</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/krisStatlander.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Kris Statlander</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/livMorgan.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Liv Morgan</h4></div></div></div></div></div></section><section class="section" id="trainers"><div class="container"><div class="row"><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/luchasaurus.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Luchasaurus</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/orangeCassidy.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Orange Cassidy</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/rickyStarks.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Ricky Starks</h4></div></div></div><div class="col-md-3 col-sm-6"><div class="trainer-item-roster"><div class="image-thumb-roster"><img src="assets/images/wrestlers/samoaJoe.jpg" alt=""></div><div class="down-content"><h4 style="line-height: 3;">Samoa Joe</h4></div></div></div></div></div></section>
#trainers {   padding-bottom: 30px; }#trainers .trainer-item {  background-color: #fff;  border-radius: 5px;  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);  padding: 15px;  margin-bottom: 30px;}#trainers .trainer-item img {  width: 100%;  border-radius: 5px;}#trainers .trainer-item span {  font-size: 13px;  font-weight: 500;  color: #006B32;  display: inline-block;  margin-top: 25px;  margin-bottom: 10px;}#trainers .trainer-item h4 {  font-size: 19px;  font-weight: 600;  color: #232d39;  letter-spacing: 0.5px;  margin-bottom: 18px;}#trainers .trainer-item p {  margin-bottom: 20px;}#trainers .trainer-item-champion {  background-color: #fff;  border-radius: 5px;  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);  padding: 15px;}#trainers .trainer-item-roster {  background-color: #fff;  border-radius: 5px;  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);  padding-top: 15px;  padding-left: 15px;  padding-right: 15px;}#trainers .trainer-item-champion img {  width: 100%;  border-radius: 5px;}#trainers .trainer-item-champion span {  font-size: 13px;  font-weight: 500;  color: #006B32;  display: inline-block;  margin-top: 15px;  margin-bottom: 10px;}#trainers .trainer-item-champion h4 {  font-size: 19px;  font-weight: 600;  color: #232d39;  letter-spacing: 0.5px;}#trainers .trainer-item-roster img {  width: 100%;  border-radius: 5px;}#trainers .trainer-item-roster span {  font-size: 13px;  font-weight: 500;  color: #006B32;  display: inline-block;  margin-top: 15px;  margin-bottom: 10px;}#trainers .trainer-item-roster h4 {  font-size: 19px;  font-weight: 600;  color: #232d39;  letter-spacing: 0.5px;}

how I have it nowhow I want it (edited in photoshop)


Viewing all articles
Browse latest Browse all 446

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>