I have written col-md in my code, but i want to how to write for small device and large device

I want to know how to write the code for col-sm smart phone device code and right know i have written for desktop only,please check that also I am not sure about my coding, now only learning bootstrap, I am new to grid system and first site in bootstrap,Could any one help me, I always want to know in practical experience.

<div class="container">
    <div class="row">
    <div class="col-md-8">
    <h3 class="title t-left">About <span>Lotus Interior</span></h3>
    <p style="text-align:justify; line-height:22px;">Lotus Value exemplifies purity and integrity. The symbolism guides us to be committed and transparent in all our dealings and adhere to timely delivery, ontime, each time,uncompromising on business ethics.We remain firmly committed towards creating urban living spaces where people can live,</p>
    </div> 
    <div class="col-md-4" style="padding-top:25px;">
    <img src="banner/banner5.jpg" alt="worker" class="img-responsive">
    </div> 
    </div>
    </div>


    <div class="container">
    <div class="row">
    <div class="col-md-3"><img src="row/1.jpg"/></div>
    <div class="col-md-3"> <img src="row/2.jpg"/></div>
    <div class="col-md-3"><img src="row/3.jpg"/></div>
    <div class="col-md-3"> <img src="row/4.jpg"/></div>
    </div>
    </div>

output imageenter image description here

Solution

It depends how large your images are and how many you would like next to each other.

On a mobile device you don't have much screen real estate, so the way you having 4 images next to each other in a single row will be too wide on a mobile device. I would recommend that you list them each 1 underneath each other for mobile so you would change your code as follow:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/4.jpg"/></div>
    </div>
</div>

The col-sm-12 advises that it should take up the entire row length, so with the above, on mobile it will list each image underneath each other.

Below is an example of your code for screen sizes for small, medium and large:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/4.jpg"/></div>
    </div>
</div>

On large devices(desktop): 4 images next to each other.
On medium devices (tablets): 2 images next to each other, with the other two underneath.
On small devices (mobile): 1 image with the others underneath

Give the following code a try, it creates a responsive image grid from the URL you provided an example of:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/1.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/2.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/3.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/4.jpg"> 
        </div>
    </div>
</div>