Fix mobile view for a div on desktop

Question

I have a widget like this:

<div class="col-md-12 col-xs-12">
    <div class="col-md-4 col-xs-12">
        1
    </div>
    <div class="col-md-4 col-xs-12">
        2
    </div>
    <div class="col-md-4 col-xs-12">
        3
    </div>
    <div class="col-md-4 col-xs-12">
        4
    </div>
</div>

I am embedding the above widget like this

<div class="container">
    <div class="col-md-12">
        <div class="col-md-3 embedWidget">
            <!-- embeeded-widget-comes-here -->
        </div>
        <div class="col-md-9">
            <!-- some other imp content here -->
        </div>
    </div>  
</div>

When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths

how can I achieve it

I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)

Answer 1

Why don't you put 100% width on embedWidget for media query for smaller devices.