Как с помощью Bootstrap создать такие блоки в таком положении?

Question

[Anon3363]

Не как не получается

Comments

[Антон Литвиненко]

Та хоть рядами, хоть колонками, покажите ваш код, в котором никак не получается

[Anon3363]

<div class="py-4 px-3 p-2 content">
            <div class="d-flex justify-content-start bg-white w-25 p-2">
                <div class="row">
                <div class="col-md-12">info</div>
                <div class="col-md-12">info</div>
                <div class="col-md-12">info</div>
                <div class="col-md-12">info</div>
                </div>
            </div>
            <div class="d-flex justify-content-start bg-white w-25 mt-2 p-2">
                <div class="row">
                <div class="col-md-4">Photos</div>
                <div class="col-md-4">Photos</div>
                <div class="col-md-4">Photos</div>
                <div class="col-md-4">Photos</div>
                <div class="col-md-4">Photos</div>
                </div>
            </div>
            <div class="d-flex justify-content-start bg-white w-25 mt-2 p-2">
                <div class="row">
                <div class="col-md-4">Feiend</div>
                <div class="col-md-4">Feiend</div>
                <div class="col-md-4">Feiend</div>
                <div class="col-md-4">Feiend</div>
                </div>
            </div>
            <div class="container bg-white w-25 ml-auto">
                <div>Content</div>
            </div>
        </div>

[Антон Литвиненко]

Anon3363, а есть фото, что должно в итоге выйти?

[profesor08]

Опиши задачу, что за колонки, зачем, почему именно так, покажи скриншот макета и тд. Потому что на твой вопрос можно ответить маленьким кусочком кода, но с вероятностью 99% ты его не сможешь использовать.

Answer 1

[persol]

Можно так:

<div class="container">
     <div class="row">
         <div class="col-4">
             <div class="row">
                 <div class="col-12">block-1</div>
                 <div class="col-12">block-2</div>
                 <div class="col-12">block-3</div>
                 <div class="col-12">block-4</div>
             </div>
         </div>
          
         <div class="col-8">
             <div class="row">
                 <div class="col-12">block-1</div>
                 <div class="col-12">block-2</div>
                 <div class="col-12">block-3</div>
                 <div class="col-12">block-4</div>
                 <div class="col-12">block-5</div>
                 <div class="col-12">block-6</div>
             </div>
         </div>
            
     </div>
</div>

Ещё можно так:

<div class="container">
     <div class="row">
         <div class="col-4">block-1</div>
         <div class="col-8">block-2</div>

         <div class="col-4">block-3</div>
         <div class="col-8">block-4</div>

         <div class="col-4">block-5</div>
         <div class="col-8">block-6</div>

         <div class="col-4">*оставляем пустым*</div>
         <div class="col-8">block-9</div>

         <div class="col-4">*оставляем пустым*</div>
         <div class="col-8">block-10</div>
     </div>
</div>

Answer 2

[Алексей Орлов]

flex-direction: column;