I need to place DESCRIPTION Column in place of blue frame. Can i do it with out putting it to next row? Did bootstrap allways come to next row? help make it higher IMG

In secound example i have widgets that shows problems and when I expand one, gape is created I need to other columns fill this gap and change their position.

How to fix it? example 2 base state

example 2 after expanding PROBLEM

Thanks

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='col-12 col-sm-12 col-md-4 col-lg-4'>
  <div class='card-box'>
    <div class='row'>
      <div class='col-3'>
        <i class='fa fa-2x fa-building font-weight-light icon-circle'></i>
      </div>
      <div class='col-9'>
        <h4>
          <?php _e("CABINET"); ?>
          <?php echo $cabinet->cabinet_name; ?>
        </h4>
      </div>
      <div class='col-12 mt-3'>
        <p>
          <?php __meta('meta_description'); ?>
        </p>
      </div>
      <div class='col-12 col-sm-12 col-md-3 col-lg-5'>
        <p class='font-weight-bold m-0'>
          <?php _e("EMPLOYEE"); ?>:</p>
        <p>xx</p>
      </div>
      <div class='col-12 col-sm-12 col-md-4 col-lg-4'>
        <p class='font-weight-bold m-0'>Klienci:</p>
        <p>xx</p>
      </div>
      <div class='col-12 col-sm-12 col-md-5 col-lg-3'>
        <p class='font-weight-bold m-0'>Zabiegi:</p>
        <p>xx</p>
      </div>
      <div class="offset-md-2 col-8 mt-1">
        <a name="" id="" onclick="deleteCabinet(<?php echo $cabinet->cabinet_id ?>)" class="btn btn-primary w-100" href="#" role="button">
          <?php _e("REMOVE"); ?>
        </a>
      </div>
    </div>
  </div>
</div>
<!-------------------------------------------------------------->
<div class='col-12 col-sm-12 col-md-8 col-lg-8'>
  <div class='card-box details-data'>
    <form class="form-edit" method="POST" action="<?php Url::link('admin/cabinets/'.$cabinet->cabinet_id) ?>">
      <?php Form::method("PATCH"); ?>
      <div class='d-flex w-100 mb-3'>
        <h3 class='mb-0'>
          <?php _e("BASIC_DETAILS"); ?>
        </h3>
        <button type='button' class='btn btn-custom btn-color-secondary ml-auto details-btn'><i class='fa fa-edit'></i><?php _e("EDIT"); ?></button>
        <button type='submit' class='btn btn-custom btn-color-secondary ml-auto submit-btn' name='editUser'><i class='fa fa-save'></i><?php _e("SAVE"); ?></button>
      </div>
      <div class='form-row'>
        <div class='col-12  form-group '>
          <label> <?php _e("NAME"); ?> </label>
          <input type='text' name='cabinet_name' class='form-control' value='<?php echo $cabinet->cabinet_name ?>'>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="col-12 col-sm-12 col-md-8 offset-md-4 col-lg-8 offset-lg-4">
  <div class="card-box details-data">
    <form class="form-edit" method="POST" action="<?php Url::link('admin/cabinets/'.$cabinet->cabinet_id) ?>">
      <?php Form::method("PATCH"); ?>
      <div class='d-flex w-100 mb-3'>
        <h3 class='mb-0'>
          <?php _e("DESCRIPTION"); ?>
        </h3>
        <button type='button' class='btn btn-custom btn-color-secondary ml-auto details-btn'><i class='fa fa-edit'></i><?php _e("EDIT"); ?></button>
        <button type='submit' class='btn btn-custom btn-color-secondary ml-auto submit-btn' name='editUser'><i class='fa fa-save'></i><?php _e("SAVE"); ?></button>
      </div>
      <div class='col-12 form-group'>
        <label><?php _e("DESCRIPTION"); ?></label>
        <textarea class='form-control' name='meta_description' rows='3'><?php __meta('meta_description'); ?></textarea>
      </div>
    </form>
  </div>
</div>

0 Answers