Solution 1 :

try something like this…

you need to move the div.row to encapsulate the two div.col-md-6

  <div class="container margin-top">
    <div class="row">
        <div class="col-md-6 wow fadeInUp" data-wow-duration="0.6s" data-wow-delay="0.5s">
          <article>
            <div class="history-wrapper">
              <h1>HISTORY OF AGENCY</h1>
              <hr>
              <h4>WHO LOVES OR PURSUES OR DESIRES TO OBTAIN PAIN OF ITSELF, BUT BECAUSE OCCASIONALLY CIRCUMSTANCES OCCUR AND PAIN CAN PROCURE HIM SOME GREAT PLEASURE</h4>
              <p>
                <br/>Porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
                ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi modi tempora incidunt ut labore.</p>
          </div>
        </article>
      </div>
      <div class="col-md-6">
        <article>
          <div class="tabs-wrapper">
            <h1>CONCEPT OF CONSTRUCTION</h1>
            <div class="tabs ef-tabs tabs-style-flip">
              <nav>
                <ul>
                  <li class="tab-current">
                    <a href="#section-flip-1">
                      <span class="tabs-icon icon-tools"></span>
                      <span class="tabs-title">PLAN OF WORK</span>
                    </a>
                  </li>
                  <li>
                    <a href="#section-flip-2">
                      <span class="tabs-icon icon-lightbulb"></span>
                      <span class="tabs-title">NEW IDEA</span>
                    </a>
                  </li>
                  <li>
                    <a href="#section-flip-3">
                      <span class="tabs-icon icon-paintbrush"></span>
                      <span class="tabs-title">INTERIOR</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <div class="content-wrap">
                <section id="section-flip-1" class="content-current">
                  <div class="col-md-12">
                    <div class="row">
                      <p>
                        Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
                      </p>
                    </div>
                  </div>
                </section>
                <section id="section-flip-2">
                  <div class="col-md-12">
                    <div class="row">
                      <p>Magnam rerum neque distinctio non eaque soluta doloribus cumque cupiditate, corrupti mollitia sapiente dolores possimus laboriosam iste cum ipsam. Porro, in, quidem?</p>
                    </div>
                  </div>
                </section>
                <section id="section-flip-3">
                  <div class="col-md-12">
                    <div class="row">
                      <p>
                        Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
                      </p>
                    </div>
                  </div>
                </section>
              </div>
              <!-- /content-wrap -->
            </div>
            <!-- /tabs -->
          </div>
          <div class="tabs-image">
            <div id="tabs-slider" class="owl-carousel">
              <div><img src="img/tabs-slider/image_1.jpg" alt="architecure tabs"></div>
              <div><img src="img/tabs-slider/image_2.jpg" alt="architecure tabs"></div>
              <div><img src="img/tabs-slider/image_3.jpg" alt="architecure tabs"></div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>

Problem :

Basically, what I did is I obtained some HTML codes online and copy-pasted the codes of elements which I want to appear on my webpage. As of the moment, I am having a hard time placing these elements (see attached screenshot below) to the white space on the right so it’ll be side-by-side with the text.

Screenshot

Here’s how the coding looks atm:

<div class="container margin-top">
  <div class="history-wrapper">
    <div class="col-md-6 wow fadeInUp" data-wow-duration="0.6s" data-wow-delay="0.5s">
      <div class="row">
        <article>
          <h1>HISTORY OF AGENCY</h1>
          <hr>
          <h4>WHO LOVES OR PURSUES OR DESIRES TO OBTAIN PAIN OF ITSELF, BUT BECAUSE OCCASIONALLY CIRCUMSTANCES OCCUR AND PAIN CAN PROCURE HIM SOME GREAT PLEASURE</h4>
          <p>
            <br/>Porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi modi tempora incidunt ut labore.</p>
        </article>
      </div>
    </div>
    <div class="col-md-5 col-md-offset-1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.3s">
    </div>
  </div>
  <div class="row">
    <article>
      <div class="col-md-6">
        <div class="tabs-wrapper">
          <h1>CONCEPT OF CONSTRUCTION</h1>
          <div class="tabs ef-tabs tabs-style-flip">
            <nav>
              <ul>
                <li class="tab-current">
                  <a href="#section-flip-1">
                    <span class="tabs-icon icon-tools"></span>
                    <span class="tabs-title">PLAN OF WORK</span>
                  </a>
                </li>
                <li>
                  <a href="#section-flip-2">
                    <span class="tabs-icon icon-lightbulb"></span>
                    <span class="tabs-title">NEW IDEA</span>
                  </a>
                </li>
                <li>
                  <a href="#section-flip-3">
                    <span class="tabs-icon icon-paintbrush"></span>
                    <span class="tabs-title">INTERIOR</span>
                  </a>
                </li>
              </ul>
            </nav>
            <div class="content-wrap">
              <section id="section-flip-1" class="content-current">
                <div class="col-md-12">
                  <div class="row">
                    <p>
                      Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
                    </p>
                  </div>
                </div>
              </section>
              <section id="section-flip-2">
                <div class="col-md-12">
                  <div class="row">
                    <p>Magnam rerum neque distinctio non eaque soluta doloribus cumque cupiditate, corrupti mollitia sapiente dolores possimus laboriosam iste cum ipsam. Porro, in, quidem?</p>
                  </div>
                </div>
              </section>
              <section id="section-flip-3">
                <div class="col-md-12">
                  <div class="row">
                    <p>
                      Great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do.
                    </p>
                  </div>
                </div>
              </section>
            </div>
            <!-- /content-wrap -->
          </div>
          <!-- /tabs -->
        </div>
        <div class="tabs-image">
          <div id="tabs-slider" class="owl-carousel">
            <div><img src="img/tabs-slider/image_1.jpg" alt="architecure tabs"></div>
            <div><img src="img/tabs-slider/image_2.jpg" alt="architecure tabs"></div>
            <div><img src="img/tabs-slider/image_3.jpg" alt="architecure tabs"></div>
          </div>
        </div>
      </div>
  </div>
</div>
</div>
</div>
</div>

Comments

Comment posted by documentation

You need to learn about the boostrap grid system (especially as you seem to have your rows and columns back to front and columns that aren’t direct children of rows) – do a search for it and there are plenty of tutorials for you. Or read the

By