मेरे पास यह सरल पाद लेख है, मैं col-md-8 को col-md-4 के ऊपर 720px (अधिकतम) के मीडिया ब्रेकपॉइंट पर व्यवस्थित करना चाहता हूं। मैं सीएसएस में नया हूं, मैं इसे सीएसएस के साथ कैसे कर सकता हूं? कृपया स्निपेट चलाएँ

/* <================== Footer ================> */

/*--- Footer Copyright ---*/
footer {
    background-color: #5A5A5A;
    color: #ffffff;
    padding: 10px;
}

footer .col-md-8 ul {
    list-style: none;
    display: inline-flex;
}

footer .col-md-8 ul>li {
    padding-left: 20px;
}

footer .col-md-8 ul>li>a {
    color: #ffffff;
}

@media only screen and (max-width: 720px) {
     
}
<!-- <======================== Footer ======================> -->
  <footer class="mt-3">
    <div class="row">
      <div class="col-md-4">

        <!-- Footer Copyright -->
        <p class="ml-4 mb-0">Copyright <i class="fa fa-copyright"></i> 2020 Swan. All Rights Reserved.</p>
      </div>
      <div class="col-md-8 pull-right">

        <!-- Footer Navigation -->
        <ul class="mr-4 mb-0">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Private Policy</a></li>
        </ul>
      </div>
    </div>

  </footer>
-1
PK Kulhari 17 जुलाई 2020, 11:15

2 जवाब

/* <================== Footer ================> */

/*--- Footer Copyright ---*/
footer {
    background-color: #5A5A5A;
    color: #ffffff;
    padding: 10px;
}

footer .col-md-8 ul {
    list-style: none;
    display: inline-flex;
}

footer .col-md-8 ul>li {
    padding-left: 20px;
}

footer .col-md-8 ul>li>a {
    color: #ffffff;
}

@media only screen and (max-width: 720px) {
     .footer-row {
        display:flex;
        flex-direction: column-reverse;
     }
}
<!-- <======================== Footer ======================> -->
  <footer class="mt-3">
    <div class="row footer-row">
      <div class="col-md-4">

        <!-- Footer Copyright -->
        <p class="ml-4 mb-0">Copyright <i class="fa fa-copyright"></i> 2020 Swan. All Rights Reserved.</p>
      </div>
      <div class="col-md-8 pull-right">

        <!-- Footer Navigation -->
        <ul class="mr-4 mb-0">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Private Policy</a></li>
        </ul>
      </div>
    </div>

  </footer>
0
m_sultan 17 जुलाई 2020, 11:21

स्तंभों को पुन: व्यवस्थित करने के लिए order-first order-md-2 बूटस्ट्रैप कक्षाएं जोड़ें:

/* <================== Footer ================> */

/*--- Footer Copyright ---*/
footer {
    background-color: #5A5A5A;
    color: #ffffff;
    padding: 10px;
}

footer .col-md-8 ul {
    list-style: none;
    display: inline-flex;
}

footer .col-md-8 ul>li {
    padding-left: 20px;
}

footer .col-md-8 ul>li>a {
    color: #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- <======================== Footer ======================> -->
  <footer class="mt-3">
    <div class="row">
      <div class="col-md-4">

        <!-- Footer Copyright -->
        <p class="ml-4 mb-0">Copyright <i class="fa fa-copyright"></i> 2020 Swan. All Rights Reserved.</p>
      </div>
      <div class="col-md-8 order-first order-md-2">

        <!-- Footer Navigation -->
        <ul class="mr-4 mb-0">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Private Policy</a></li>
        </ul>
      </div>
    </div>
  </footer>
0
SilverSurfer 17 जुलाई 2020, 14:57