feture

 Use CSS variable - (float)

This is CSS sheet(Responsive Colum)

/* responsiv colum */

*{

    box-sizing: border-box;

}

.coluem1{

    float: left;

    width: 25%;

    padding: 10px;

}

@media screen and (max-width:900px) {

   .coluem1{

       float: left;

       width: 50%;

   }

}

@media screen and (max-width:600px) {

    .coluem1{

        float: left;

        width: 100%;

    }

 }

 This is HTML sheet

 <div class="rowcl1">

                    <div class="coluem1">

                        <h1>HTML</h1>

                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error voluptates aut illum animi eius iusto cupiditate tempora adipisci vel nobis facilis at blanditiis sed cumque labore voluptatem, quis, exercitationem delectus!</p>

                    </div>

                    <div class="coluem1">

                        <h1>CSS</h1>

                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error voluptates aut illum animi eius iusto cupiditate tempora adipisci vel nobis facilis at blanditiis sed cumque labore voluptatem, quis, exercitationem delectus!</p>

                    </div>

                    <div class="coluem1">

                        <h1>JAVA</h1>

                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error voluptates aut illum animi eius iusto cupiditate tempora adipisci vel nobis facilis at blanditiis sed cumque labore voluptatem, quis, exercitationem delectus!</p>

                    </div>

                    <div class="coluem1">

                        <h1>Python</h1>

                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error voluptates aut illum animi eius iusto cupiditate tempora adipisci vel nobis facilis at blanditiis sed cumque labore voluptatem, quis, exercitationem delectus!</p>

                    </div>

                </div>