Bootstrap - układ bloków w siatce

Question

Witam, napotkałem na mały problem z układem bloków na mojej stronie, mianowicie chciałem stworzyć stronę z wszystkimi potrzebnymi danymi kontaktowymi (4 bloki kwadratowe) i dodatkowo mapą google. Chcę żeby wyglądało to tak:

A wygląda tak:

Jak to naprawić? Fragment kodu:

<main>
<section class="contacts">
<div class="container">
<center>
<div class="row ">
<div class="col-6 col-lg-3" style="padding:7%;"></div>
<div class="col-6 col-lg-3" style="padding:7%;"></div>
<iframe src="https://www.google.com/maps(....)" width="570" height="570" frameborder="0" style="border:2px solid #00995C; float:right;" allowfullscreen></iframe>
<div class="col-6 col-lg-3" style="padding:7%;"></div>
<div class="col-6 col-lg-3" style="padding:7%;"></div>
</div>	
</center>
</div>
</section>
</main>

 

Answer 1

Wydaje mi się, że to będzie coś takiego:

<main>
    <section class="contacts">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="col-6">
                            1
                        </div>
                        <div class="col-6">
                            2
                        </div>
                        <div class="col-6">
                            3
                        </div>
                        <div class="col-6">
                            4
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <iframe allowfullscreen="" frameborder="0" height="570" src="https://www.google.com/maps(....)" style="border:2px solid #00995C; float:right;" width="570">
                    </iframe>
                </div>
            </div>
        </div>
    </section>
</main>

 

Comments

Działa, bardzo dziękuję :)