Bootstrap 3 responsive col in a row - how to?

Question

So i have a row with 2 or 3 different col's inside. I want it to be like on this site : http://wrapbootstrap.com/preview/WB0196957 On featured. There are those 3 images with text and when i minimize my browser they'll be aligned under each one not besides each one.

So how do i do that?

I tried it like this but this won't work when i minimize the browser because the things will overlap because they're in one row.

<div class="container dates-sub">
    <div class="row">
        <div class="col-md-4">
            <span class="day-sub">28</span>
            <span class="month-sub">09</span>
            <span class="year-sub">2015</span>
        </div>
        <div class="col-md-offset-2 col-md-4">
            <span class="day-sub">30</span>
            <span class="month-sub">10</span>
            <span class="year-sub">2015</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
                <p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">Benefit-Gala</h3>
                <p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea. At vero eos et accusam et ju-
                    sto duo dolores etea clita kasd gubergren, no s-
                    ea takimata sandaipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

I don't see where you've tried to put your images, but as long as you put them in a "thumbnail" class like so, <div class="thumbnail"><img src="..."></div> they should not overlap.

Than apply a col-xs-6 col-md-12 and to change the top/bottom orientation of the caption to left/right.

See an example: http://www.bootply.com/h6STovl9Qq

Answer 2

Currently, you're using these layouts :

• 4 / (+2)4 for the first line (.col-md-4 + .col-md-offet-2.col-md-4)
• 6 / 6 for the second line (.col-md-6 + .col-md-6)

You need to know several things about Bootstrap:

• md means "medium" (ie. devices larger than 992px, and thinner than 1200px)
• Bootstrap is mobile first, which means it'll try to render the extra-small layout first, then small, then medium, then large.
• Wihout any column classes used, Bootstrap will use the 12-column class.

This means you have not any column classes set for extra-small and small devices. In this case, Bootstrap render them as 12-columns elements, which explains they're taking the full row.

To get your layout to work on every device, you need to use the smallest column class as possible, .col-xs-xx:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container dates-sub">
    <div class="row">
        <div class="col-xs-4">
            <span class="day-sub">28</span>
            <span class="month-sub">09</span>
            <span class="year-sub">2015</span>
        </div>
        <div class="col-xs-offset-2 col-xs-4">
            <span class="day-sub">30</span>
            <span class="month-sub">10</span>
            <span class="year-sub">2015</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="blog-title">
                <h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
                <p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea.</p>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="blog-title">
                <h3 class="blog-heading">Benefit-Gala</h3>
                <p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea. At vero eos et accusam et ju-
                    sto duo dolores etea clita kasd gubergren, no s-
                    ea takimata sandaipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Answer 3

Please read bootstrap documentation

http://getbootstrap.com/css/

In you want to force element to look same as on big screens you have to add them other responsive classes like this

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>

Or if you are using less you can do something like this

.my-class{
 .make-lg-column(6);
 .make-md-column(6);
 .make-sm-column(6);
 .make-xs-column(6);
}

<div class="my-class">Hello</div>