Responsive div for mobile-CodePudding

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 >
   <div >
  
      <div >
         <div >
            <div ></div>
            <div >V1 :    </div>
         </div>
         <div >
            <div >B</div>
            <div >ရင်ထဲရှိသမျှ စကားလုံးများ</div>
         </div>
         <div >
            <div >E</div>
            <div >ကို န</div>
         </div>
         <div >
            <div >B</div>
            <div >င်ပြောဖို့အတွက် ဘာအတားအဆီးမှမ</div>
         </div>
         <div >
            <div >E</div>
            <div >ရှိ</div>
         </div>
      </div>
   </div>
</div>

CodePudding user response：

add flex-wrap: wrap; to the parent div

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