<div class="container">
    <div class="row">
        {% for item in arr %}
            <div class="col-md-4">
                <div class="card">
                    ...
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<select id ="select">
        <option value="1">2 кнопки</option>
        <option value="2">5 кнопок</option>
    </select>
    <div id="btns-1" class="btns" style="display: none;">
        <button style="background-color: #bad;">lorem</button>
        <button style="background-color: #bad;">lorem</button>
    </div>
    <div id="btns-2" class="btns" style="display: none;">
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
    </div>

const select = document.querySelector('#select');
const handleSelectChange = e => {
    let btns = document.getElementsByClassName('btns');
    for (let index = 0; index < btns.length; index++) {
        btns[index].style.display = 'none';
    }
    let value = e.target.value;
    let current = document.getElementById('btns-'+value);
    current.style.display = 'block';
}
select.addEventListener('change', handleSelectChange);