Demo:
HTML:
<div class="filterByPriceWrap row mb-3">
<div class="shopPayment col-md-6 mb-3 d-flex flex-wrap">
<h1 class="dcsTitle">Shop By Down Payment</h1>
<a href="buyherepayhere?clearall=1&downpaymentLow=500&downpaymentHigh=799" class="btn">$500 Down</a>
<a href="buyherepayhere?clearall=1&downpaymentLow=800&downpaymentHigh=1199" class="btn">$800 Down</a>
<a href="buyherepayhere?clearall=1&downpaymentLow=1200&downpaymentHigh=1200" class="btn">$1,200 Down</a>
<a href="buyherepayhere?clearall=1&downpaymentLow=1200&downpaymentHigh=10000" class="btn">$1,200+ Down</a>
</div>
<div class="shopPayment col-md-6 mb-3 d-flex flex-wrap">
<h1 class="dcsTitle">Shop By Weekly Payment</h1>
<a href="buyherepayhere?clearall=1&PaymentLow=75&PaymentHigh=75" class="btn">$75</a>
<a href="buyherepayhere?clearall=1&PaymentLow=75&PaymentHigh=95" class="btn">$75 - $95</a>
<a href="buyherepayhere?clearall=1&PaymentLow=95&PaymentHigh=100" class="btn">$95 - $100</a>
<a href="buyherepayhere?clearall=1&PaymentLow=100&PaymentHigh=100000" class="btn">$100 or More</a>
</div>
</div>
SCSS Extend:
.shopPayment {
h1 {
flex-basis: 100%;
}
a {
@extend %default-btns;
flex: 1 48%;
margin: 2px;
padding: 1rem 0;
}
}