0

I am trying to create this design (here) using Bootstrap 3 in mobile view. However, I want images to be opposite each other like this

This what I have done so far:

HTML:

<div class="container">
        <div class="row">
            <div class="col-md-6"><img src="http://www.dialhousehotel.com/wp-content/uploads/2017/09/room-5.jpg" alt="Picture of room one" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Cosy<br>
</span></h2>
                    <p>Our Cosy double rooms are small but perfectly appointed for your stay. Each one has a double bed and views out to the garden from the main house.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-6 col-md-pull-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6 col-md-push-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
                    <p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room three" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Awesome<br>
</span></h2>
                    <p>Our Awesome rooms are wonderfully comfortable, similar to the Splendid but with stunning views of the village and River Windrush. These truly sumptuous rooms are the perfect place to relax and call ‘home from home’.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
        </div>
    </div>

There seems to be a gap between the second col-md-6 group. does not seem to fix the columns overlapping. The codepen is https://codepen.io/anon/pen/pabRJg

pkjboy
  • 113
  • 1
  • 7
  • You can not mess with the grid system like that - .row needs to contain just .col-elements, you can not just insert arbitrary other stuff. Just put two of those 6-of-12 wide columns into a .row each, that should automatically solve your problem (.row applies the clearfix implicitly already.) – CBroe Feb 05 '18 at 17:05
  • `.clearfix` is intentionally used for responsive reset when more than 12 are used in a single `.row`: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets – Carol Skelly Feb 05 '18 at 18:55

1 Answers1

0

You should reverse the push/pull columns...

            <div class="clearfix"></div>
            <div class="col-md-6 col-md-push-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
            <div class="col-md-6 col-md-pull-6">
                <div class="rooms-photo-text">
                    <h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
                    <p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
                    <div class="wideSeparatorDark"></div>
                </div>
            </div>
            <div class="clearfix"></div>

https://codepen.io/anon/pen/RQRKLd

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks. Now I understand. – pkjboy Feb 05 '18 at 17:11
  • Additionally, if the OP wraps each image/text column group in its own `row` they can omit the need for `clearfix` entirely. – Robert Feb 05 '18 at 17:15
  • @RobertC yes but in some cases that doesn't work responsively. There a situations where more than 12 in a single `.row` container is needed https://stackoverflow.com/questions/26679160/bootstrap-3-more-than-12-columns-in-a-row – Carol Skelly Feb 05 '18 at 18:52
  • Agreed, there are always cases where `row` isn't ideal. But one where it seems a fixed number of columns is known like the above? It ventures deep into opinion-based but to me `row` is the superior choice here as it omits an unnecessary element while maintaining the frameworks intended implementation. – Robert Feb 06 '18 at 13:22