Bulma - How to put image and text inline - html

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.stack.imgur.com/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.stack.imgur.com/WpMdM.png" alt="">
</figure>
</div>
</div>
</section>