title: Bootstrap 4: Flexbox Image on the left and text on the right
body: <p>I am trying to achieve this image below in bootstrap either thru column or flexbox:</p>
  <p><a href="https://i.stack.imgur.com/K64tY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K64tY.jpg" alt="enter image description here" /></a></p>
  <p>Basically there must be a 965 x 678px image on the left and there are text floating on the right which if you check the fiddle below it is not function as it should be.</p>
  <p>I tried to use Flexbox but its not working.</p>
  <p>Here's my HTML:</p>
  <pre><code>&lt;section id=&quot;golf&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;div class=&quot;d-flex justify-content-start&quot;&gt;
                      &lt;div class=&quot;menu-image&quot;&gt;
                          &lt;img src=&quot;https://via.placeholder.com/975x678&quot; class=&quot;img-fluid&quot; alt=&quot;menu image&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;menu-text&quot;&gt;
                          &lt;h2 class=&quot;main-title text-left&quot;&gt;Golf Ter&lt;/h2&gt;
                          &lt;hr class=&quot;hr-style-left&quot; /&gt;
                          &lt;div class=&quot;menu-content d-flex space-between&quot;&gt;
                              &lt;p class=&quot;menu-name&quot;&gt;GOlfy&lt;/p&gt;
                              &lt;p class=&quot;menu-price&quot;&gt;$200.00&lt;/p&gt;
                          &lt;/div&gt;
      
                          &lt;div class=&quot;menu-content d-flex space-between&quot;&gt;
                              &lt;p class=&quot;menu-name&quot;&gt;GOlfy&lt;/p&gt;
                              &lt;p class=&quot;menu-price&quot;&gt;$200.00&lt;/p&gt;
                          &lt;/div&gt;
  
                          &lt;div class=&quot;menu-content d-flex space-between&quot;&gt;
                              &lt;p class=&quot;menu-name&quot;&gt;GOlfy&lt;/p&gt;
                              &lt;p class=&quot;menu-price&quot;&gt;$200.00&lt;/p&gt;
                          &lt;/div&gt;
  
                          &lt;div class=&quot;menu-content d-flex space-between&quot;&gt;
                              &lt;p class=&quot;menu-name&quot;&gt;Kimbap&lt;/p&gt;
                              &lt;p class=&quot;menu-price&quot;&gt;P200.00&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  <p>And here's the CSS:</p>
  <pre><code>.menu-container{
    width: 100%;
  }
  
  
  .menu-content{
     margin-top: 1.5rem;
     width: 50%;
  }
  
  .menu-text{
      padding: 90px;
      width: 50%;
  }
  
  p.menu-name{
      font-size: 1.3rem;
      text-align: left;
      text-transform: uppercase;
      color: #191919;
      font-weight: bold;
  
  }
  
  p.menu-price{
      margin-left: 9rem;
      font-weight: normal;
      color: #191919;
      font-size: 1.3rem;
  }
  </code></pre>
  <p>This must be responsive w/c means when you resize the screen the image and the text must be still on the same position and will stack next to each other on mobile device screen.</p>
  <p>Here's the jsfiddle so you can see the actual code: <a href="https://jsfiddle.net/L23zqn5x/1/" rel="nofollow noreferrer">https://jsfiddle.net/L23zqn5x/1/</a></p>