runnig a block of bootstrap 5 code in special Conditions-CodePudding

I would like to run this code when the window width is 500 px or more and Run the other code block when the width is 499 px or less . How can I do this

500 px or more :

            <div class="card text-center d-inline-block m-2" style="width: 13rem;" >
              <img src=".." class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title" style="font-size: 1rem;">name</h5>
                <p class="card-text text-muted" style="font-size: 0.8rem;">100 $</p>
                <a href="#" class="btn btn-primary" style="font-size: 0.9rem;">watch</a>
              </div>
        </div>

499 or less :

<div class="card mb-3" style="max-width: 540px;">
     <div class="row g-0">
<div class="col-md-4">
  <img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

CodePudding user response：

You'd have to include both of them inside a div each, which would be conditionally rendered according to viewport size. For the div with <= 499px, you'll need to enclose the whole part in:

<div class="d-md-none">
</div>

And for the div with >=500px, you'll need to enclose the whole part in:

<div class="d-none d-md-block">
</div>

JSFiddle