Responsive div for mobile

Issue

I have following divs like row and column with different width. In big screen it is one line of cord with lyric. I return from chordsheetjs. I want to make it responsive. I can only add css. At mobile, if screen is not big enough to show, I want to move down the column one by one. Column will be dynamic count. Some line may have 4 and some line may be 6 columns.

May I know how can I create a responsive div in this kind of html?

here is the current css

.chord-sheet .paragraph .row {
  display: flex;
}

<div class="chord-sheet">
   <div class="paragraph">
  
      <div class="row">
         <div class="column">
            <div class="chord"></div>
            <div class="lyrics">V1 :    </div>
         </div>
         <div class="column">
            <div class="chord">B</div>
            <div class="lyrics">ရင်ထဲရှိသမျှ စကားလုံးများ</div>
         </div>
         <div class="column">
            <div class="chord">E</div>
            <div class="lyrics">ကို န</div>
         </div>
         <div class="column">
            <div class="chord">B</div>
            <div class="lyrics">င်ပြောဖို့အတွက် ဘာအတားအဆီးမှမ</div>
         </div>
         <div class="column">
            <div class="chord">E</div>
            <div class="lyrics">ရှိ</div>
         </div>
      </div>
   </div>
</div>

Solution

add flex-wrap: wrap; to the parent div

.parent{
   display: flex;
   flex-wrap: wrap;
}

Answered By - Steve Walson