using bootstrap 4, how can one create mobile input friendly buttons that are side-by-side?

Question

Can't seem to figure this one out.

I want to allow a mobile user of my app to interact with two, large (ideally square) buttons which live side by side using bootstrap 4 framework.

Beneath each button, is an <input> which acts as a counter for the # of times the button above was pressed.

I can't get the button/input pairs to line up vertically in mobile mode, like this:

----------------
| (Mobile view)|
|  <card>      |
|  [B1]  [B2]  |
|  [I1]  [I2]  |
|              |
| </card>      |

Answer 1

It sounds like you want nesting like this...

https://www.codeply.com/go/FkjWVM03VF

     <div class="card">
             <div class="card-block">
                  <div class="row">
                        <div class="col-6">
                            <div class="row">
                                <div class="col-12 col-sm-6">
                                    <button class="btn btn-primary btn-block" type="button">Button</button>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <input class="form-control" placeholder="input 1">
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row">
                                <div class="col-12 col-sm-6">
                                    <button class="btn btn-primary btn-block" type="button">Button</button>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <input class="form-control" placeholder="input 2">
                                </div>
                            </div>
                        </div>
                  </div>
            </div>
      </div>