Загрузите содержимое бутстрапа div div в новую строку

Как-то я не могу понять, как закончить мой код, который я отформатировал как список, и мне нужно отформатировать его как сетку, которая переключается на javascript.

Мой HTML-код ниже используется для списка контента

<div class="list">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
    </div>
</div>

Код CSS для списка. Все остальные CSS взяты с помощью bootstrap

.styled_view div.list {
    padding: 0;
    width: 100%;
}

Тот же код должен использоваться для отображения сетки

<div class="grid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
    </div>
</div>

CSS для сетки

.styled_view div.grid {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 19.4%;
}

19.4% для каждой части галереи удерживает DIV рядом. Это не приведет к новой линии. Как я могу это решить?

Ответы

Ответ 1

Сделайте строку div.

Подобно этому

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css'; return false;" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="grid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>
        <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>
    </div>
</div>