در کد زیر چطوری میتونم تگ div وسطی موجود در row را طوری تنظیم کنم که برای اندازه های کوچکتر از تبلت به اولین div تبدیل شود و در بقیه سایزهای بزرگتر از md به آیتم وسطی تبدیل شود
<div class="row">
                            <!-- First column-->
                            <div class="col-12 col-lg-2" >
                                <!-- Pricing Card -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0" style="text-align: center;">انجام معاملات</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex align-content-center flex-wrap gap-3">
                                            <button class="btn btn-success form-control mb-2" id="long_btn" onclick="submit_long()" type="submit" {% if access == 'short' %}disabled{% endif %}>پوزیشن لانگ</button>
                                            <button class="btn btn-danger form-control mb-2" id="short_btn" onclick="submit_short()" type="submit" {% if access == 'long' %}disabled{% endif %}>پوزیشن شورت</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- /Pricing Card -->
                            </div>
                            <!-- chart -->
                            <div class="col-12 col-lg-8">
                                <!-- Product Information -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex flex-column justify-content-center">
                                            <form action="{% url 'trader:change_chart' %}" method="POST">
                                                {% csrf_token %}
                                                <div class="d-flex align-content-center flex-wrap gap-3 mb-0">
                                                    <select aria-label="نمونه انتخاب پیش فرض" class="select2 form-select" id="timeframe" name="timeframe">
                                                        <option value="5" {% if time_frame == '5' %}selected{% endif %}>5</option>
                                                        <option value="15" {% if time_frame == '15' %}selected{% endif %}>15</option>
                                                        <option value="30" {% if time_frame == '30' %}selected{% endif %}>30</option>
                                                    </select>
                                                    <select aria-label="نمونه انتخاب پیش فرض" class="select2 form-select"  name="symbol", id="symbol">
                                                        <option value="BTCUSDT" {% if symbol == 'BTCUSDT' %}selected{% endif %}>BTCUSDT</option>
                                                        <option value="ETHUSDT" {% if symbol == 'ETHUSDT' %}selected{% endif %}>ETHUSDT</option>
                                                        <option value="LINKUSDT" {% if symbol == 'LINKUSDT' %}selected{% endif %}>LINKUSDT</option>
                                                        <option value="SOLUSDT" {% if symbol == 'SOLUSDT' %}selected{% endif %}>SOLUSDT</option>
                                                        <option value="FTMUSDT" {% if symbol == 'FTMUSDT' %}selected{% endif %}>FTMUSDT</option>
                                                        <option value="ADAUSDT" {% if symbol == 'ADAUSDT' %}selected{% endif %}>ADAUSDT</option>
                                                        <option value="MATICUSDT" {% if symbol == 'MATICUSDT' %}selected{% endif %}>MATICUSDT</option>
                                                        <option value="XRPUSDT" {% if symbol == 'XRPUSDT' %}selected{% endif %}>XRPUSDT</option>
                                                        <option value="BNBUSDT" {% if symbol == 'BNBUSDT' %}selected{% endif %}>BNBUSDT</option>
                                                        <option value="AVAXUSDT" {% if symbol == 'AVAXUSDT' %}selected{% endif %}>AVAXUSDT</option>
                                                        <option value="DOGEUSDT" {% if symbol == 'DOGEUSDT' %}selected{% endif %}>DOGEUSDT</option>
                                                    </select>
                                                    <button class="btn btn-primary" type="submit">تغیر چارت</button>
                                                </div>
                                            </form>
                                            
                                        </div>
                                    </div>
                                    
                                    <div class="card-body" style="height: 70vh;">
                                        <!-- TradingView Widget BEGIN -->
                                        <div id="tradingview-widget" class="tradingview-widget-container">
                                            <div class="tradingview-widget-container__widget"></div>
                                            <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
                                            <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
                                                {
                                                    "autosize": true,
                                                    "symbol": "BINANCE:{{symbol}}.P",
                                                    "interval": "{{time_frame}}",
                                                    "timezone": "Asia/Tehran",
                                                    "theme": "dark",
                                                    "style": "1",
                                                    "locale": "en",
                                                    "withdateranges": true,
                                                    "hide_side_toolbar": false,
                                                    "allow_symbol_change": true,
                                                    "details": false,
                                                    "calendar": false,
                                                    "hide_volume": true,
                                                    "support_host": "https://www.tradingview.com"
                                                }
                                            </script>
                                            
                                        </div>
                                        <!-- TradingView Widget END -->
                                    </div>

                                    <div class="card-header">
                                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center align-items-md-center mb-3">
                                            
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-discount-price" style="text-align: center;">سود و ضرر به درصد</label>
                                                <input aria-label="محصول قیمت با تخفیف" class="form-control" id="average-percent" name="productDiscountedPrice" placeholder="0.0%" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-discount-price" style="text-align: center;">سود و ضرر به تتر</label>
                                                <input aria-label="محصول قیمت با تخفیف" class="form-control" id="average-usdt" name="productDiscountedPrice" placeholder="0.0" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-discount-price" style="text-align: center;">معاملات لانگ</label>
                                                <input aria-label="محصول قیمت با تخفیف" class="form-control" id="position-long-number" name="productDiscountedPrice" placeholder="0" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-discount-price" style="text-align: center;">معاملات شورت</label>
                                                <input aria-label="محصول قیمت با تخفیف" class="form-control" id="position-short-number" name="productDiscountedPrice" placeholder="0" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-discount-price" style="text-align: center;">معاملات سود ده</label>
                                                <input aria-label="محصول قیمت با تخفیف" class="form-control" id="position-positive-number" name="productDiscountedPrice" placeholder="0" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            <div class="mb-2 d-flex flex-column justify-content-center mx-1">
                                                <label class="form-label" for="ecommerce-product-price" style="text-align: center;">معاملات ضرر ده</label>
                                                <input aria-label="قیمت محصول" class="form-control" id="position-negative-number" name="productPrice" placeholder="0" type="number" style="text-align: center;" readonly/>
                                            </div>
                                            

                                        </div>
                                        <div class="d-flex flex-column justify-content-center" style="align-items: center;">
                                            <form action="{% url 'trader:change_chart' %}" method="POST">
                                                {% csrf_token %}
                                                <div class="d-flex align-content-center flex-wrap gap-3 mb-0">
                                                    <button class="btn btn-warning" type="submit">ریست سود و ضرر</button>
                                                </div>
                                            </form>
                                        </div>
                                        
                                        
                                    </div>
                                </div>
                                <!-- /Product Information -->
                            </div>
                            <!-- /Second column -->
                            <!-- Second column -->
                            <div class="col-12 col-lg-2 mt-1">
                                <!-- Pricing Card -->
                                <div class="card mb-4">
                                    <div class="card-body"><div class="mb-3">
                                        <label class="form-label" for="ecommerce-product-discount-price">قیمت معامله</label>
                                        <input aria-label="محصول قیمت با تخفیف" class="form-control" id="position-price-open" name="productDiscountedPrice" placeholder="0.0" type="number" style="text-align: center;"/>
                                    </div></div>
                                    <div class="card-header">
                                        <h5 class="card-title mb-0" style="text-align: center;">پیکربندی جفت ارز</h5>
                                    </div>
                                    <div class="card-body">
                                    </div>
                                </div>
                                <!-- /Pricing Card -->
                            </div>
                            <!-- /Second column -->
                        </div>