1
  1. for medium screen
|-----(1)||-----(2)|
  1. for mobile screen iphone x
|---------------(2)|
|-----(1)|

in first scenario both (1) and (2) have same column size in single line, but in second scenario (1) and (2) both have in different line,

<div class="row">
<h3 class="col-7 col-md-6" >(1)</h3>
<h3 class="col-12 col-md-6" >(2)</h3>
</div>

but in second scenario (mobile screen) i am facing difficulty to set column, can any one help me for second scenario.

rohan pandole
  • 21
  • 3

1 Answers1

0

[Edited]

Flex is the solution :)

You can use flex properties to make it easier, they're a little tricky at the beginning but very effective.

Example

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-5">
  <h2>Option</h2>
  <div class="w-50 d-flex flex-column-reverse flex-md-row">
    <h3 class="col-7 col-md-6 border border-dark">(1)</h3>
    <h3 class="col-12 col-md-6 border border-dark">(2)</h3>
  </div>
</div>
Ezequiel S. Sandoval
  • 150
  • 1
  • 2
  • 13
  • i have edited scenario where in mobile screen and medium screen size for both in single code, if first scenario then medium screen, if second scenario then mobile screen how do i write single code, can you please edit your answer, Thank you – rohan pandole Mar 26 '21 at 19:25