In my layout 2 columns on small devices

[mstdmstd]

Hello,
Could you please look at design of
http://vtasks.my-demo-apps.tk/
site

In my vue/cli 4 / Bootstrap 4.3 app I make listing of tasks in 1 column on small devices(ipad-s)
and 2 columns on big devices, like :
 

<div class="row " v-show="tasks.length && is_page_loaded">
<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id" class="col-sm-12 col-md-6 p-2 m-0">
<task-list-item
:currentLoggedUser="currentLoggedUser"
:nextActiveTask="nextActiveTask"
:index="index"
:is_show_location="true"
></task-list-item>
</div>
</div>

But testing different devices with Chrome, Chromium I see 2 colums on ipad:
https://imgur.com/a/QEfcHdi
and I do not see why.
Is it error in my design? Problems with browsers ?

Thanks!
 

[requinix]

How wide is your display? What are the thresholds for what Bootstrap considers to be sm and md?

[mstdmstd]

I provided a printscreen with device selected at top : ipad : 768*1024.

Did you see it ?

I expected content be in 1 column. Why in 2 columns ?

[requinix]

How about my second question? Did you find an answer to that?

[mstdmstd]

2) I suppose :

small grid (≥ 768px) = .col-sm-*,
medium grid (≥ 992px) = .col-md-*,
large grid (≥ 1200px) = .col-lg-*.

 

and is it related with problem I have ?

[requinix]

Where did you get those numbers? From the Bootstrap v3 documentation?

[mstdmstd]

I suppose from  Bootstrap 4. Are they different?

Actually I used browsers default devices for testing?

Do you mean that for  Bootstrap 3 and  Bootstrap 4 sizes are different ?

 

[requinix]

Stop supposing and actually find the answer. It's documented very clearly if you look for it.

Yes, Bootstrap v3 and v4 define the sizes differently. Because apparently nobody over there has any idea what "backwards compatibility" is.

[mstdmstd]

Yes, you are right : sizes are different. 
I fixed the issue.
Could you, please, take a look at legend layout at page
http://vtasks.my-demo-apps.tk/public_profile/3
I aded borders for fieldset, but with border legend text is striked out : https://prnt.sc/qat40d
and I did not find how to fix it...