Bulma - How to put image and text inline

Question

I want text on right and image on left and vice-versa with vertically centered both.

It should look like as follows

Image

Answer 1

Structure

<section>
  <div class="columns">
    <div class="column is-7">
      <!-- Image -->
    </div>
    <div class="column is-5">
      <!-- My hero -->
    </div>
  </div>
</section>
<section>
  <div class="columns">
    <div class="column is-5">
      <!-- My hero -->
    </div>
    <div class="column is-7">
      <!-- Image -->
    </div>
  </div>
</section>

In total

(Change CSS according to your needs)

.myBg {
  background-color: #273238;
  color: white;
  border: 1px solid white;
}

.myHero .hr {
  display: inline-block;
  width: 100px;
  height: 15px;
  background: white;
  border-radius: 20px;
  margin-bottom: 15px;
}

.myHero h1 {
  font-size: 50px
}

.myHero.hero-right {
  padding-right: 100px;
  text-align: right;
}

.myHero.hero-left {
  padding-left: 100px;
}

@media(max-width: 768px) {
  .myHero {
    padding: 100px 50px !important;
    //text-align: left !important;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="myBg">
  <div class="columns is-vcentered">
    <div class="column is-7">
      <figure class="image is-4by3">
        <img src="https://i.sstatic.net/WpMdM.png" alt="">
      </figure>
    </div>
    <div class="column is-5">
      <div class="myHero hero-right">
        <div class="hr"></div>
        <h1>BOOST</h1>
        <ul>
          <li>This is the cooles thing.</li>
          <li>I am gonna do in my entire life. Awesome!</li>
          <li>Achievements are good as heaven. I want it soon.</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<section class="myBg">
  <div class="columns is-vcentered">
    <div class="column is-5">
      <div class="myHero hero-left">
        <div class="hr"></div>
        <h1>BOOST</h1>
        <ul>
          <li>This is the cooles thing.</li>
          <li>I am gonna do in my entire life. Awesome!</li>
          <li>Achievements are good as heaven. I want it soon.</li>
        </ul>
      </div>
    </div>
    <div class="column is-7">
      <figure class="image is-4by3">
        <img src="https://i.sstatic.net/WpMdM.png" alt="">
      </figure>
    </div>
  </div>
</section>